<template>
	<view class="login">
		<image class="logo" :src="web_host+'/static/images/logo.png'" mode="widthFix"></image>
		<view class="form">
			<view class="form-item">
				<u-icon name="account-fill" color="#fb7e0f"></u-icon>
				<view class="form-input">
					<input v-model="form.mobile" style="padding: 0 32rpx" type="text" placeholder="请输入您的手机号" />
				</view>
			</view>
			<view class="form-item">
				<u-icon name="lock-fill" color="#fb7e0f"></u-icon>
				<view class="form-input">
					<input v-model="form.password" type="password" style="padding: 0 32rpx" placeholder="请输入您的密码" />
				</view>
			</view>
			<c-button :style="{backgroundColor: themeColor.theme}" round block size="medium" @click="login">
				<text class="btn-label">登录</text>
			</c-button>

			<view class="protocol" @click="isChecked = !isChecked">
				<uni-icons :type="isChecked ? 'checkbox-filled' : 'circle'" size="24"
					:color="isChecked ? themeColor.theme : '#cdd2d9'"></uni-icons>
				已阅读并同意
				<text class="lk" @tap.stop="pageRoute('/pages/service/agreement/agreement?type=user')">《用户协议》</text>
				和
				<text class="lk"
					@click.stop="pageRoute('/pages/service/agreement/agreement?type=privacy')">《隐私协议》</text>
			</view>
		</view>
		<company-info></company-info>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const web_host = inject('web_host');

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		isChecked: false,
		form: {
			mobile: undefined,
			password: undefined,
		}
	});

	onLoad((opt) => {});

	onShow(() => {});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
	});

	function login() {
		if (!state.isChecked) {
			uni.showToast({
				title: '必须阅读并同意用户协议和隐私政策',
				icon: 'none',
			})
			return;
		}

		request.post('wxauth/login', {
			mobile: state.form.mobile,
			password: state.form.password,
		}).then(res => {
			console.log('用户登录', res);
			if (res.code === 1) {
				cache.set('LOGIN_STATUS_TOKEN', res.token);
				cache.set('isRefreshing', true);
				uni.showToast({
					title: res.msg,
					icon: 'success'
				})
				uni.switchTab({
					url: '/pages/tabbar/my/my'
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error'
				})
			}
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		isChecked,
		form
	} = toRefs(state);
</script>

<style lang="scss">
	page,
	.login {
		height: 100%;
		background-color: $bg-inverse-color;
	}

	.login {
		@include f-center($direction: column);
		padding: $margin-24 10%;
		box-sizing: border-box;

		.logo {
			margin-top: 100rpx;
			width: 248rpx;
			height: 248rpx;
		}

		.form {
			flex: 1;
			width: 100%;
			margin-top: 180rpx;

			.form-item {
				@include f-between;
				height: 76rpx;
				margin-bottom: 24rpx;
				background-color: #f3f4f6;
				border-radius: 12rpx;

				.u-icon {
					margin: 0 16rpx;
				}

				.form-input {
					flex: 1;
					@include f-between;
					padding-right: 16rpx;

					input {
						flex: 1;
						margin-right: 16rpx;
					}
				}
			}

			.btn-label {
				margin-left: 12rpx;
			}

			.protocol {
				@include f-center;
				margin-top: 32rpx;
				font-size: 24rpx;
				color: #909399;
				line-height: 1;

				.lk {
					font-size: 24rpx;
					color: #2d7ce2;
				}
			}
		}
	}
</style>